<script setup lang="ts" name="Nav">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import Portrait from "@/components/Portrait/index.vue"
const defaultImg = new URL('@/assets/img/head_portrait.jpg', import.meta.url).href;

const menuList = ['icon-xinxi', 'icon-shipin', 'icon-shu', 'icon-shandian', 'icon-shezhi'];
const current = ref(0);
const router = useRouter();

const changeMenu = (index: number) => {
  current.value = index;
  switch (index) {
    case 0:
      router.push('/chat-home');
      break;
    case 1:
      ElMessage({
        type: 'info',
        message: '该功能还没有开发哦，敬请期待一下吧~🥳',
      });
      break;
    case 2:
      ElMessage({
        type: 'info',
        message: '该功能还没有开发哦，敬请期待一下吧~🥳',
      });
      break;
    case 3:
      ElMessage({
        type: 'info',
        message: '该功能还没有开发哦，敬请期待一下吧~🥳',
      });
      break;
    case 4:
      ElMessage({
        type: 'info',
        message: '该功能还没有开发哦，敬请期待一下吧~🥳',
      });
      break;
    default:
      router.push('/chat-home');
  }
};
</script>

<template>
  <div class="nav-page">
    <div class="nav-menu-wrapper">
      <ul class="nav-list">
        <li
          v-for="(item, index) in menuList"
          :key="item"
          :class="{ activeNav: index === current }"
          @click="changeMenu(index)"
        >
          <div class="block"></div>
          <span class="iconfont" :class="item"></span>
        </li>
      </ul>
    </div>
    <div class="own-pic">
      <Portrait :imgUrl="defaultImg"></Portrait>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.nav-page {
  width: 100%;
  height: 90vh;
  position: relative;
  border-radius: 20px 0 0 20px;

  .nav-menu-wrapper {
    position: absolute;
    top: 40%;
    transform: translate(0, -50%);
    width: 100%;

    .nav-list {
      display: flex;
      flex-direction: column;
      row-gap: 32px;

      li {
        display: flex;
        justify-content: space-between;
        padding-right: 8px;
        cursor: pointer;

        .block {
          width: 8px;
          background-color: rgb(29, 144, 245);
          border-radius: 3px;
          opacity: 0;
          transition: opacity 0.5s;
        }

        &:hover {
          span {
            color: rgb(29, 144, 245);
          }
          .block {
            opacity: 1;
          }
        }
      }
    }
  }

  .own-pic {
    position: absolute;
    bottom: 10%;
    right: 8px;
  }
}

.activeNav {
  span {
    color: rgb(29, 144, 245);
  }
  .block {
    opacity: 1 !important;
  }
}
</style>
